<markup>
<div data-view-container data-view-whr = "unlimited">
	<section data-view-id = "page1">
		<header>视图1</header>
		<h1>这是视图1</h1>
		<div class = "if-auto-save">
			<label><input type = "checkbox" checked/> 自动保存参数至上下文</label>
		</div>
		<div class = "btn">进入视图2</div>
	</section>
	<section data-view-id = "page2">
		<header>
			<span class = "nav-back" data-view-rel = ":back"></span>视图2
		</header>
		<h1>这是视图2</h1>
		<div data-view-rel = "page3" class = "btn">进入视图3</div>
	</section>
	<section data-view-id = "page3">
		<header>
			<span class = "nav-back" data-view-rel = ":back"></span>视图3
		</header>
		<h1>这是视图3</h1>
	</section>
</div>
<div class = "msg"></div>
</markup>
<link rel = "stylesheet" href = "demo/css/common.css"/>
<style>
[data-view-container]{
	height: 50%;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	box-sizing: border-box;
	overflow: auto;
}
.if-auto-save{
	margin: 0.12rem;
}
.msg{
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 50%;
	padding: 10px 0;
	overflow: auto;
	box-sizing: border-box;
}
.msg > div{
	padding: 10px;
}
.msg > div:nth-child(even){
	background-color: #ECECEC;
}
.msg-item{
	color: #999999;
}
.msg-item .title{
	color: #333333;
}
.msg-item .time{
	float: right;
	color: #999999;
}
</style>
<script>
var page1 = View.ofId("page1"),
	page2 = View.ofId("page2"),
	page3 = View.ofId("page3");

var page1BtnObj = page1.find(".btn"),
	page1CheckboxObj = page1.find("input");
var msgObj = View.find(document.body, ".msg");

/* 设置是否自动保存参数 */
page1CheckboxObj.addEventListener("change", function(){
	page2.setIfAutoSaveParamsToContext(this.checked);
});

/* 带参数跳转 */
page1BtnObj.addEventListener("click", function(){
	View.navTo("page2", {
		params: {
			key: "value",
		}
	});
});

/**
 * 呈现信息
 * @param {String} title 标题
 */
var showMsg = function(title){
	var divObj = document.createElement("div");
	divObj.className = "msg-item";
	divObj.innerHTML = "<div>\n\t<div class = \"title\"><span></span><span class = \"time\"></span></div>\n\t<div class = \"desc\"></div>\n</div>";

	divObj.querySelector(".title span").innerHTML = title;
	divObj.querySelector(".title .time").innerHTML = new Date().toLocaleTimeString();

	var keys = page2.context.listKeys();
	var data = {};
	keys.forEach(function(k){
		data[k] = page2.context.get(k);
	});

	divObj.querySelector(".desc").innerHTML = 0 == keys.length? "上下文没有数据": ("上下文中的数据：" + JSON.stringify(data));

	msgObj.prepend(divObj);
};

page1.on("leave", function(e){
	showMsg("视图1 - " + e.type);
});
page3.on("leave", function(e){
	showMsg("视图3 - " + e.type);
});
page2.on("beforeenter, leave", function(e){
	showMsg("视图2 - " + e.type);
});
</script>
<script class = "ctrl">
{
	/* 是否要求 View.js 完成初始化 */
	requireViewjsInitialized: false
}
</script>